<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <link rel="stylesheet" href="styles/style.css">
        <link rel="stylesheet" href="styles/theme/atom-one-dark.css">
        <title>例子3-JS进阶总结</title>
    </head>
    <body>
        <div id="address">
            <select id="province" placeholder="请选择省份"></select>
            <select id="city" placeholder="请选择城市"></select>
            <select id="area" placeholder="请选择区"></select>
        </div>
        <pre>
            <code>
                    'use strict'

                    // promise
                    ;(function () {
                        let o = {}
                        const oProvince = $('#province')
                        const oCity = $('#city')
                        const oArea = $('#area')
                        const ROOT_PATH = 'https://www.easy-mock.com/mock/5b0bbc3457fbcf7910d25388/promise'

                        // 接口
                        const API = {
                            PROVINCE: `${ROOT_PATH}/province`,
                            CITY: `${ROOT_PATH}/city`,
                            AREA: `${ROOT_PATH}/area`
                        }

                        // 数据缓存
                        let cacheData = {
                            province: [],
                            city: [],
                            area: []
                        }

                        // 创建dom模板
                        o.createTemplate = data =>
                            data.map(item => `&lt;option value="${item.ID}"&gt;${item.Name}&lt;/option&gt;`).join('')

                        o.request = url =>
                            new Promise((resolve, reject) => {
                                $.ajax({
                                    url: url,
                                    type: 'get',
                                    success(res) {
                                        resolve(res)
                                    },
                                    error(err) {
                                        reject(err)
                                    }
                                })
                            })

                        // 数据过滤
                        o.filter = (data, id) => {
                            let arr = []
                            data.map(item => {
                                if (item.ParentId === id) {
                                    arr.push(item)
                                }
                            })
                            return arr
                        }

                        // 初始化
                        o.init = () => {
                            o.request(API.PROVINCE)
                                .then(res => {
                                    cacheData.province = res.data
                                    oProvince.html(o.createTemplate(res.data))
                                    return o.request(API.CITY)
                                })
                                .then(res => {
                                    cacheData.city = res.data
                                    const filteredData = o.filter(res.data, $('#province').val())
                                    oCity.html(o.createTemplate(filteredData))
                                    return o.request(API.AREA)
                                })
                                .then(res => {
                                    cacheData.area = res.data
                                    const filteredData = o.filter(res.data, $('#city').val())
                                    oArea.html(o.createTemplate(filteredData))
                                }).catch(err => {
                                    console.error(err)
                                    alert('获取数据错误')
                                })

                            // Promise.all()
                            // Promise.all([o.request(API.PROVINCE), o.request(API.CITY), o.request(API.AREA)])
                            //     .then(res => {
                            //         cacheData.province = res[0].data
                            //         cacheData.city = res[1].data
                            //         cacheData.area = res[2].data
                            //         oProvince.html(o.createTemplate(res[0].data))
                            //         const filteredCity = o.filter(cacheData.city, $('#province').val())
                            //         oCity.html(o.createTemplate(filteredCity))
                            //         const filteredArea = o.filter(cacheData.area, $('#city').val())
                            //         oArea.html(o.createTemplate(filteredArea))
                            //     }).catch(err => {
                            //         console.error(err)
                            //         alert('获取数据错误')
                            //     })

                            oProvince.on('change', () => {
                                const filteredData = o.filter(cacheData.city, $('#province').val())
                                oCity.html(o.createTemplate(filteredData))
                            })

                            oCity.on('change', () => {
                                const filteredData = o.filter(cacheData.area, $('#city').val())
                                oArea.html(o.createTemplate(filteredData))
                            })
                        }

                        window.multiSelector1 = o.init
                    })()




                    // ###################################################################################################

                    // 使用async函数
                    ;(function () {
                        let o = {}
                        const oProvince = $('#province')
                        const oCity = $('#city')
                        const oArea = $('#area')
                        const ROOT_PATH = 'https://www.easy-mock.com/mock/5b0bbc3457fbcf7910d25388/promise'
                        const API = {
                            PROVINCE: `${ROOT_PATH}/province`,
                            CITY: `${ROOT_PATH}/city`,
                            AREA: `${ROOT_PATH}/area`
                        }
                        let cacheData = {
                            province: [],
                            city: [],
                            area: []
                        }
                        o.createTemplate = data =>
                            data.map(item => `&lt;option value="${item.ID}"&gt;${item.Name}&lt;/option&gt;`).join('')

                        o.request = url =>
                            new Promise((resolve, reject) => {
                                $.ajax({
                                    url: url,
                                    type: 'get',
                                    success(res) {
                                        resolve(res)
                                    },
                                    error(err) {
                                        reject(err)
                                    }
                                })
                            })

                        o.filter = (data, id) => {
                            let arr = []
                            data.map(item => {
                                if (item.ParentId === id) {
                                    arr.push(item)
                                }
                            })
                            return arr
                        }

                        o.init = async () => {
                            let province, city, area
                            try {
                                province = await o.request(API.PROVINCE)
                                city = await o.request(API.CITY)
                                area = await o.request(API.AREA)
                            } catch(err) {
                                console.error(err)
                            }
                            cacheData.province = province.data
                            cacheData.city = city.data
                            cacheData.area = area.data
                            oProvince.html(o.createTemplate(cacheData.province))
                            const filteredCity = o.filter(cacheData.city, $('#province').val())
                            oCity.html(o.createTemplate(filteredCity))
                            const filteredArea = o.filter(cacheData.area, $('#city').val())
                            oArea.html(o.createTemplate(filteredArea))


                            oProvince.on('change', () => {
                                const filteredData = o.filter(cacheData.city, $('#province').val())
                                oCity.html(o.createTemplate(filteredData))
                            })

                            oCity.on('change', () => {
                                const filteredData = o.filter(cacheData.area, $('#city').val())
                                oArea.html(o.createTemplate(filteredData))
                            })
                        }

                        window.multiSelector2 = o.init
                    })()

            </code>
        </pre>
        <script src="scripts/libs/highlight.pack.js"></script>
        <script src="scripts/libs/jquery-1.8.3.min.js"></script>
        <script src="scripts/3.js"></script>
        <script>
            hljs.initHighlightingOnLoad();
        </script>
    </body>
</html>